<template>
    <el-form
        :model="localFormData"
        label-width="80px"
        :rules="rules"
        class="seriesdialog"
    >
                <el-form-item prop="definition" label="清晰度">
                    <el-select v-model="localFormData.definition" placeholder="请选择清晰度" >
                        <el-option
                        v-for="item,index in definitionData"
                        :key="index"
                        :label="item"
                        :value="parseInt(index)">{{item}}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="pushtype" label="推流类型">
                    <el-select v-model="localFormData.pushtype" placeholder="请选择推流类型" >
                        <el-option
                        v-for="item,index in pushtypeData"
                        :key="index"
                        :label="item"
                        :value="parseInt(index)">{{item}}
                        </el-option>
                    </el-select>
                </el-form-item>
        <!--<el-divider></el-divider>-->
        <template v-for="item,index in localFormData.anchors" :key="index">
            <el-row justify="space-between">
                <el-col :span="4" class="mediatitle">主播{{index+1}}</el-col>
                <el-col :span="4" class="right">
                    <el-button @click="handleDelImage(index)" size="mini" class="tjbtn">
                        <el-icon><delete /></el-icon>
                        <span>删除</span>
                    </el-button>
                </el-col>
            </el-row>
            <el-row class="tjbox mt15">
                <el-col :span="24">
                    <el-form-item label="类型">
                        <el-select v-model="item.idtype" placeholder="请选择类型" >
                            <el-option
                            v-for="item,index in idTypeData"
                            :key="index"
                            :label="item"
                            :value="parseInt(index)">{{item}}
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="姓名">
                        <el-input v-model="item.fullname" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="卡号">
                        <el-input v-model="item.idnum" placeholder="请输入卡号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="认证编号">
                        <el-input v-model="item.certno" placeholder="请输入认证编号"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-divider></el-divider>
        </template>
    </el-form>
    <!--<el-button @click="handleAddAnchor" class="btn-add">添加主播</el-button>-->
</template>

<script>
    import {  ref, toRef, reactive } from 'vue'
    import {Delete} from '@element-plus/icons'
    export default {
        name: "",
        components: {
            Delete
        },
        props: {
            formData: {
                type: Object
            },
        },
        setup(props) {
            const localFormData = toRef(props, 'formData')
            // 主播类型数据
            const idTypeData = ref({1:'身份证'})
            const definitionData = ref({1:"标清",2:"高清",3:"超高清"})
            const pushtypeData = ref({1:"流畅",2:"普通"})
            // const livestateData = ref({"pending":"直播等待","live":"直播中","end":"直播结束"})

            const rules = reactive({
                definition: {required: true, message: '请选择清晰度', trigger: 'change'},
                pushtype: {required: true, message: '请选择推流类型', trigger: 'change'},
            })
            // 添加主播方法
            const handleAddAnchor = () => {
                localFormData.value.anchors.push({
                    idtype:1,
                    fullname: '',
                    idnum: ''
                })
            }
            // 删除主播
            const handleDelImage = (key) => {
                localFormData.value.anchors.splice(key,1)
            }

            return {
                localFormData,
                idTypeData,
                definitionData,
                pushtypeData,
                rules,
                handleAddAnchor,
                handleDelImage
            }
        }
    }
</script>

<style scoped  lang="scss">
    .btn-add{
        width:85%;
        background-color: rgba(222,222,222,0.4);
        color:#3D73F2;
        height: 80px;
        display: block;
        margin:30px auto;
        border:0 !important;
        font-weight: bold;
    }
    .el-divider--horizontal{
        margin:0 0 15px;
    }
    .el-divider{
        border-top: 1px dashed #ddd;
        background-color: transparent;
    }
</style>